<template>
  <el-page-header title="返回" @back="this.$router.back()" class="page-header"/>
  <el-card class="blog_info">
    <h1 class="blog_title">{{ blogDetail.name }}</h1>
    <div class="blog_time">{{dateFormat(blogDetail.datetime)}}</div>
  </el-card>
  <el-card class="paragraph">
    <p v-for="paragraph in blogDetail.content">
      {{ paragraph }}
    </p>
  </el-card>

  <div style="background-color: #6cf; display: none;">
    {{ this.blogDetail.id }}
    <br>
    {{ this.blogDetail.content }}
    <br>
    {{ this.blogDetail.name }}
    <br>
    {{ this.blogDetail.datetime }}
  </div>
</template>


<script>
import store from '../store'
import {useRouter} from "vue-router";

export default {
  name: "BlogDetail",
  setup() {
    const router = useRouter()
    const id = router.currentRoute.value.query.id
    return {
      id
    }
  },
  computed: {
    blogDetail() {
      return store.getters.getBlogDetail(Number(this.id))
    }
  },
  methods: {
    dateFormat(timestamp) {
      return new Date(timestamp * 1000).toLocaleString()
    },
  }
}
</script>

<style scoped>
.page-header {
  margin-bottom: 8px;
}

.paragraph {
  text-align: initial;
  padding: 0 30px;
  line-height: 25px;
}

.paragraph p {
  text-indent: 2em;
  padding-bottom: 1.5em;
}

.blog_title {
  margin-bottom: 5px;
}

.blog_time {
  font-size: 13px;
}
</style>